<template>
  <div class="p-4">
    <h2 class="text-2xl font-bold mb-4">热门风格与功能</h2>
    <div class="grid grid-cols-3 gap-4">
      <div 
        v-for="module in modules" 
        :key="module.id" 
        class="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow"
      >
        <div class="w-full h-48 bg-primary/10 flex items-center justify-center">
          <span class="text-primary font-bold text-xl">{{ module.icon }}</span>
        </div>
        <p class="text-center p-2">{{ module.name }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
const modules = [
  { id: 1, name: 'YOYYI AI 热门风格', icon: '🔥' },
  { id: 2, name: 'AI反应堆', icon: '⚛️' },
  { id: 3, name: '豆包', icon: '🤖' },
  { id: 4, name: '高清美图', icon: '🖼️' },
  { id: 5, name: '美国插画', icon: '🇺🇸' },
  { id: 6, name: '皮斯克风格', icon: '🎨' },
  { id: 7, name: '手绘画风', icon: '🖌️' },
  { id: 8, name: '放大', icon: '🔍' },
  { id: 9, name: '抠图', icon: '✂️' },
];
</script>